<template>
	<view>
		<div v-show="mainflag" class="container flex-column flex-space-between" :class="[isChangeParts?'container-showparts':'container']">
			<view class="flex-column container-type-box">
				<text class="report-type-title">报告类型</text>
				<view class="report-type flex-row">
					<view class="report-type-button" @click="on(item)" :class="[currentActive===item.id?'active':'report-type-button']"
					 v-for="(item,key) in reportType" :key="key">
						{{item.type}}
					</view>
				</view>
			</view>

			<view class="container-mian  flex-column  flex-space-between">
				<view class="container-mian-item issolve flex-row flex-space-between">
					<text class="text">是否解决:</text>
					<view class="swich">
						<QSswitch color="#1AAD19" v-model="isSolve"></QSswitch>
					</view>
				</view>
				<view class="solution-box flex-column flex-space-between">
					<text class="solution">故障现象:</text>
					<view class="content-box">
						<textarea class="solution-content" maxlength="300" v-model="submitInfo.reason" placeholder-style="color:#CCCCCC"
						 placeholder="请输入故障信息" />
						</view>
				</view>
				<view class="solution-box flex-column flex-space-between">
					<text class="solution">解决方案:</text>
					<view class="content-box">
						<textarea class="solution-content" maxlength="300" v-model="submitInfo.solution" placeholder-style="color:#CCCCCC"
						 placeholder="请输入解决方案" />
					</view>
				</view>
			</view>
			<view class="container-ischangeparts-box flex-center flex-column ">
				<view class="container-mian-item container-ischangeparts flex-row flex-space-between ">
					<text class="text">是否更换配件:</text>
						<view class="swich">
							<QSswitch color="#1AAD19" v-model="isChangeParts" ></QSswitch>
						</view>
				</view>
				<view v-show="isChangeParts" class="container-mian-item container-parts flex-row flex-space-between ">
					<text class="text">配件名称型号:</text>
					<input class="uni-input" type="text" v-model="submitInfo.fitting_addtion" placeholder="请输入配件型号" />
				</view>
			</view>
				
			<view class="add-img ">
				<text class="text margin-left-sm">工作图片:</text>
				<!-- <sunui-upbasic class="upload" :upImgConfig="upImgBasic" @onUpImg="upBasicData" @onImgDel="delImgInfo" ref="uImage"></sunui-upbasic> -->
				<m-uplod :imgList.sync="submitInfo.file" :config="mBaseConfig"></m-uplod>
			</view>
			<view class="submit flex-center">
				<button type="primary" class="submit-button" @click="submit()">{{status !== 0?'更新':'添加'}}</button>
			</view>
		</div>
	</view>
</template>

<script>
	import uplod from '@/components/sunui-upimg/sunui-upimg.vue'
	import mUplod from '@/components/sunui-upimg/m_upload.vue'
	import QSswitch from '@/components/QS-inputs-split/elements/QS-switch/index.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import validate from '@/common/js_sdk/fshjie-formvalidate/ys-validate.js'
	import config from '@/config/index.js'
	import {getTokenSync} from '@/utils/auth.js'
	import sunuiUpbasic from '@/components/sunui-upimg/sunui-upbasic-report.vue'
	import {createReport,getReportDetailsByEquipmentId,updateReport} from '@/api/user/index.js'
	export default {
		components: {
			sunuiUpbasic,QSswitch,uniCollapse,uniCollapseItem,mUplod
		},
		data() {
			return {
				mainflag:false,
				
				mBaseConfig:{
					count: 4,//图片上传数量
					sizeType: ['album'], //
					sourceType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					url: config.baseUrl + '/report?action=UploadFile',
					upload_name: 'file[]',//图片上传字段名
					header: {
						'authorization': "Bearer " + getTokenSync()
					},
				},
				// 基础版配置
				upImgBasic: {
				// 后端图片接口地址
				basicConfig: {
					url: config.baseUrl + '/report?action=UploadFile'
				},
				// 是否开启提示(提醒上传图片的数量)
				// tips: false,
				// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
				notli: true,
				// 图片数量
				count: 5,
				// 相机来源(相机->camera,相册->album,两者都有->all,默认all)
				sourceType: 'all',
				// 是否压缩上传照片(仅小程序生效)
				sizeType: true,
				// 上传图片背景修改 
				upBgColor: '#ededed',
				// 上传icon图标颜色修改(仅限于iconfont)
				upIconColor: '#666666',
				// 上传svg图标名称
				// upSvgIconName: 'icon-card',
				// 上传文字描述(仅限四个字)
				upTextDesc: '上传图片',
				// 删除按钮位置(left,right,bleft,bright),默认右上角
				delBtnLocation: '',
				
				// 是否隐藏添加图片
				// isAddImage: false,
				// 是否隐藏删除图标
				// isDelIcon: false,
				// 删除图标定义背景颜色
				// delIconColor: '',
				// 删除图标字体颜色
				// delIconText: '',
				// 上传图标替换(+),是个http,https图片地址(https://www.playsort.cn/right.png)
				iconReplace: '',
				},
				
				
				reportType: [{
					id: 0,
					type: '巡检'
				}, {
					id: 1,
					type: '调试'
				}, {
					id: 2,
					type: '保养'
				}, {
					id: 3,
					type: '维修'
				}, {
					id: 4,
					type: '培训'
				}, {
					id: 5,
					type: '安装'
				}, ],
				reportId: undefined,// 工单id 编辑时根据此id查询数据回显
				currentActive: -1,
				status: 0,// 当前的页面状态 1为更新状态 0为添加状态
				isSolve: false,
				isChangeParts:false,
				submitInfo: {
					repair_id:'',
					equipment_id: 40,//设备id
					type: "",//工单类型
					reason: "",//故障描述
					result: '',//是否解决
					solution:"", //解决方案
					fitting:'',//是否更换配件
					fitting_addtion:"",//配件
					file:[],//图片地址
					fileParams:''//文件地址拼接
				},
				//跳转标志
				flag:'',
			}
		},
		methods: {
			//################################################报告类型点击事件############################################################
			on(item) {
				this.currentActive = item.id
				this.submitInfo.type = item.type
				console.log(item.id)
				console.log(this.submitInfo.type)
			},
			//################################################验证############################################################
			isEmpty(){
				console.log(typeof this.submitInfo.type)
			    if(typeof this.submitInfo.type == "undefined" || this.submitInfo.type == null || this.submitInfo.type == ""){
			        uni.showToast({
			        	icon:'none',
						title: '工单类型不能为空！'
			        })
					return true;
			    }else{
			        return false;
			    }
			},
			//################################################创建工作报告############################################################
			//添加
			submit(){
				// let that = this
				// if(this.submitInfo.file){
				// 	this.submitInfo.file.forEach(item =>{
				// 		that.submitInfo.fileParams  += "&file[]="+item
				// 	})
				// }
				// console.log(this.submitInfo.fileParams?this.submitInfo.fileParams:'&file[]=')
				if(!this.isEmpty()){
					console.log(this.submitInfo.file)
					this.submitInfo.result = this.isSolve?1:0
					this.submitInfo.fitting = this.isChangeParts?1:0
					this.submitInfo.type = this.currentActive
					// this.submitInfo.imgUrl = this.submitInfo.imgUrl.join().split('+')
					let that = this
					uni.showModal({
					    title: 	`${that.status === 0?'录入':'更新'}确认`,
					    content: `确定要${that.status === 0?'录入':'更新'}工单吗？`,
					    success: function (res) {
					        if (res.confirm) {
					    //      createReport(that.submitInfo).then((re)=>{
					    //      	if(re.code == 1){
					    //  //     		if(that.flag == 1){
					    //  //     			uni.reLaunch({
					    //  //     			    url: '/pages/views/engineer/EnteringSuccess/EnteringSuccess?id=1'
					    //  //     			});
					    //  //     		}else{
										
					    //  //     			uni.reLaunch({
					    //  //     			    url: '/pages/views/engineer/EnteringSuccess/EnteringSuccess?id=4&equipment_id='+that.submitInfo.equipment_id
					    //  //     			});
					    //  //     		}
									// uni.hideLoading()
									// uni.showToast({
									// 	icon: 'success',
									// 	title: '成功'
									// })
									// setTimeout(()=>{
									// uni.navigateBack()
									// },1000)
					    //      	}else{
					    //      		uni.showToast({
					    //      			icon: 'none',
					    //      			title: res.msg
					    //      		})
					    //      	}
					         	
					    //      })
								console.log(111111)
								if(that.status === 0){
									that.create()
								}else{
									that.update()
								}
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				
					
				}
			},
			//################################################更新工作报告############################################################
			update(){
				updateReport(this.submitInfo).then(res =>{
					if(res.code == 1){
						uni.hideLoading()
						uni.showToast({
							icon: 'success',
							title: '成功'
						})
						setTimeout(()=>{
						uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//################################################创建工作报告############################################################
			create(){
				createReport(this.submitInfo).then(res =>{
					if(res.code == 1){
						uni.hideLoading()
						uni.showToast({
							icon: 'success',
							title: '成功'
						})
						setTimeout(()=>{
						uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//################################################图片上传部分############################################################
			// 删除图片 -2019/05/12(本地图片进行删除)
			async delImgInfo(e) {
				console.log('你删除的图片地址为:', e, this.submitInfo.file.splice(e.index, 1));
			},
			// 基础版
			async upBasicData(e) {
				console.log('===>', e);
				// 上传图片数组
				let arrImg = [];
				for (let i = 0, len = e.length; i < len; i++) {
					try {
						if (e[i].path_server != "") {
							await arrImg.push(e[i].path_server.split(','));
						}
					} catch (err) {
						console.log('上传失败...');
					}
				}
				// 图片信息保存到data数组
				this.submitInfo.file = arrImg;
				// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
				if (arrImg.length == this.upImgBasic.count) {
					uni.showToast({
						title: `上传成功`,
						icon: 'none'
					});
				}
			},
			/**
			 * 获取工单详情
			 */
			getReportDetails(){
				console.log(this.reportId)
				if(this.status === 1){
					getReportDetailsByEquipmentId(this.reportId).then(res =>{
						this.submitInfo = res.result
						this.currentActive = this.submitInfo.type
						this.isSolve = this.submitInfo.result === 1?true:false
						this.isChangeParts = this.submitInfo.fitting === 1?true:false
						let imgArr = []
						res.result.file.forEach(item =>{
							imgArr = imgArr.concat(item.file)
						})
						
						imgArr[0]?this.submitInfo.file = imgArr:this.submitInfo.file=[]
						// this.$refs.uImage.setPictureList(imgArr)
						console.log(res)
						console.log(imgArr)
						uni.hideLoading()
						this.mainflag = true
					})
					console.log('这是更新回显数据')
				}
			}

		},
		onLoad(op) {
			this.submitInfo.repair_id = op.repair_id?op.repair_id:''
			this.submitInfo.equipment_id = parseInt(op.equipment_id)
			this.status = parseInt(op.status)
			this.reportId = parseInt(op.report_id)
			this.flag =  parseInt(op.id)
			this.getReportDetails()
			
			// 非编辑页面的加载
			if(this.status === 0){
				uni.hideLoading()
				this.mainflag = true
			}
			
		},
		onShow() {
			/**
			 * 检验当前是否已经登录
			 */
			let curRoute  = this.$mp.page.route;
			this.$intercept.permission(curRoute)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #EFEFF4;
		width: 100%;
		margin: 0 auto;
		height: 2500rpx;
	}
	.container-showparts{
		height: 2600rpx;
	}
	.container-type-box {
		background-color: #FFFFFF;
		width: 100%;
		height: 290rpx;
	}

	.report-type-title {
		height: 40rpx;
		font-size: 28rpx;
		margin-left: 50rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 95%;
	}

	.report-type-button:active {
		background-color: #DFDFDF;
	}

	.active {
		/* background: #eee; */
		background-color: #1AAD19;
		color: #FFFF;
	}

	.report-type {
		border-top: 2rpx solid rgb(240, 240, 240);
		width: 95%;
		height: 250rpx;
		flex-wrap: wrap;

		.report-type-button {
			width: 26%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			display: inline-block;
			font-size: 22rpx;
			border: 2rpx solid #D6D5D6;
			border-radius: 5000rpx;
			margin: 20rpx;
		}
	}

	.container-mian {
		background-color: #FFFFFF;
		width: 100%;
		height: 1200rpx;


		.fault-description {
			font-size: 32rpx;
			height: 100rpx;

			.uni-input {
				line-height: 100rpx;
				width: 70%;
			}

			.text {
				width: 30%;
			}

		}

		.issolve {
			height: 100rpx;
			font-size: 32rpx;

			.swich {
				width: 70%;
			}
		}
		
		
		.solution-box{
			width: 95%;
			height: 550rpx;
			margin-bottom: 10rpx;
			border-bottom: 2rpx solid rgb(240,240,240) ;
			.solution{
				
				width: 100%;
				font-size: 28rpx;
				border-bottom: 2rpx solid rgb(240,240,240) ;
				height: 60rpx;
				line-height: 60rpx;
				align-items: flex-start;
				
			}
			.content-box{
				background-color: #EFEFF4;
				width: 100%;
				.solution-content{
					color: #666666;
					height: 440rpx;
					border: 2rpx solid rgb(240,240,240) ;
					width: 95%;
					margin: 0 auto;
					padding: 10rpx;
				}
			}
			
		}
		
		
		.container-mian-item {
			border-bottom: 1rpx solid rgb(240,240,240);
			width: 95%;
			align-items: center;
		}
	}

	.container-ischangeparts-box{
		background-color: #FFFFFF;
		width: 100%;
		
		
		.container-ischangeparts {
			width: 95%;
			height: 100rpx;
			.text{
				width: 30%;
				font-size: 32rpx;
			}
			.swich {
				width: 70%;
			}
		}
		.container-parts {
			width: 95%;
			height: 100rpx;
			.text{
				width: 30%;
				font-size: 32rpx;
			}
			.uni-input{
				line-height: 100rpx;
				width: 70%;
			}
		}
		.container-mian-item {
			border-bottom: 1rpx solid rgb(240,240,240);
			width: 95%;
			align-items: center;
		}
	}

	.add-img {
		background-color: #FFFFFF;
		width: 100%;
		height: 600rpx;
		align-items: center;
		.text{
			margin-top: 20rpx;
			width: 95%;
			font-size: 28rpx;
			border-bottom: 1rpx solid rgb(240,240,240);
		}
		.upload{
			width: 100%;
			align-self: flex-start;
		}
	}

	.submit {
		width: 100%;
		height: 200rpx;
		.submit-button{
			width: 90%;
		}
	}
</style>
